import React, {Component} from 'react';
import CSS from './PwdLogin.less';
import {observable, action, computed, autorun, extendObservable} from 'mobx';
import {observer, inject} from 'mobx-react';
import Navigation from '../../../components/Navigation/Navigation.jsx';
import SubmitButton from '../../../components/SubmitButton/SubmitButton';
import InputItem from '../../../components/InputItem/InputItem';
import Icon from '../img/squareMeter.png';


class OrderLine {
    @observable length = 2;

    @computed get squared() {
        return this.length * this.length;
    }

    set squared(value) { // this.squared = 2 的时候触发
        this.length = Math.sqrt(value);
    }
}

@inject("store") // 获取Provider注入的store
@observer
class PwdLogin extends Component {

    @observable phoneNumber = "";
    @observable password = "";
    @observable code = "";
    @observable onFocus = false;
    @observable list = [1, 2, 4];
    @observable showPassword = true;
    @observable showHistoryAcount = false;
    @observable HISTORY_ACOUNT = localStorage.getItem("HISTORY_ACOUNT");

    @action
    getPhone(e) {
        this.phoneNumber = e.target.value;
    }

    @action
    getPassword(e) {
        this.password = e.target.value;
    }

    @action
    getCode(e) {
        this.code = e.target.value;
    }

    @action
    changeState = () => {
        this.showPassword = !this.showPassword;
    }

    @action
    del= (phone)=>{
        const historyAcount =localStorage.getItem("HISTORY_ACOUNT");
        if(historyAcount){
            let allData=[];
            JSON.parse(historyAcount).map(i=>{
                if(i.phone!==phone.toString()){
                    allData.push( JSON.stringify(i));
                }
            });
            localStorage.setItem("HISTORY_ACOUNT", '['+allData+']');
            this.HISTORY_ACOUNT = '['+allData+']';
        }
    }

    @action
    historyAcount=()=>{
        this.showHistoryAcount = !this.showHistoryAcount;
    }
    login = () => {
        const historyAcount =localStorage.getItem("HISTORY_ACOUNT");
        let allData=[];
        if(historyAcount){
            JSON.parse(historyAcount).map(i=>{
                if(i.phone!==this.phoneNumber){
                    allData.push( JSON.stringify(i));
                }
            });
            allData.push(JSON.stringify({phone:this.phoneNumber}));
        } else {
            allData.push(JSON.stringify({phone:this.phoneNumber}));
        }
        localStorage.setItem("HISTORY_ACOUNT", '['+allData+']');
        this.HISTORY_ACOUNT = '['+allData+']';
        // const map = observable.map({price: 20, amount: 2});
        // console.log(map.has("price"), map.has("value"));
        // ;
        // map.set("remark", "订单有错误");
        // debugger
        // let aa = map.keys();
        // console.log(aa);
        // // map.delete("remark");
        // console.log(map.get("remark"));
        // console.log(map.keys(), map.values());

        // this.list[2] = 3;

        // map.set("key","new value");
        // const temperature = observable({
        //   firstName: 'a'
        // });
        // const order = new OrderLine(2);
        // console.log(order.squared);
        // order.length = 3;
        // const scalar = observable.box(20);
        // console.log(scalar.get());
        // console.log(this.props)
        // console.log(/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phoneNumber) && !!this.password && !!this.code)
    }

    // getVerification = computed(() => {
    //   console.log(!!this.phoneNumber && !!this.password && !!this.code)
    // });

    disposer = autorun(() => {
        return {
            isPhoneNumber: /^[1][3,4,5,7,8][0-9]{9}$/.test(this.phoneNumber),
            isPassword: !!this.password,
            isCode: !!this.code
        }
    });

    render() {
        const HISTORY_ACOUNT = JSON.parse(this.HISTORY_ACOUNT) ? JSON.parse(this.HISTORY_ACOUNT) : {length: 0};
        return (
            <div className={CSS.outer}>
                <Navigation
                    left={"返回"}
                    context={"用户登录"}
                    leftHandle={this.props.history.goBack}/>
                <div className={CSS.body}>
                    <div className={CSS.content}>
                        <div className={CSS.squareBox}>
                            <img src={Icon} alt="平方米" className={CSS.squareMeter}/>
                        </div>
                            <InputItem
                                leftIcon={<img src={require('../img/user.png')}/>}
                                rightIcon={<div style={{padding: '0.4rem'}} onClick={this.historyAcount}>
                                    <img src={require('../img/more.png')}/>
                                </div>}
                                placeholder="请输入手机号"
                                onchange={e => this.getPhone(e)}
                                inputValue={this.phoneNumber}
                            >
                                {this.showHistoryAcount && <div className={CSS.selectBox}>
                                    {HISTORY_ACOUNT.length > 0 ? HISTORY_ACOUNT.map(i=>
                                        <div key={i.phone} className={CSS.phoneItem}>
                                            <div>
                                                {i.phone}
                                            </div>
                                            <div className={CSS.del} onClick={e=>this.del(i.phone)}>删除</div>
                                        </div>
                                    ) : "暂无历史账号"}
                                </div>}
                            </InputItem>
                            <InputItem
                                isPassword={this.showPassword}
                                leftIcon={<img src={require('../img/lock.png')}/>}
                                rightIcon={
                                    <div style={{padding: '0.2rem'}} onClick={this.changeState}>
                                        <img src={require('../img/hide.png')}/>
                                    </div>
                                }
                                placeholder="请输入登录密码"
                                onchange={e => this.getPassword(e)}
                                inputValue={this.password}
                            />
                        <SubmitButton
                            context={"登录"}
                            style={{marginTop: "1rem" ,background: "linear-gradient(to right, #2799FF , #15C8FF)"}}
                            handleClick={this.login}/>
                        <p>新用户注册&nbsp;&nbsp;|&nbsp;&nbsp;忘记密码</p>
                    </div>
                    <div className={CSS.footer}>
                        <div className={CSS.copyRight}>copyright ©️ Square Meter 2018</div>
                    </div>
                </div>
            </div>
        )
    }
}

export default PwdLogin